<template>
  <div class="grid-box full">
    <ElInput v-model="keyword" placeholder="请输入关键字" style="grid-area: searches;">
      <template #append>
        <ElButton>点我</ElButton>
      </template>
    </ElInput>
    <ElScrollbar>
      <el-tree ref="treeRef"
        :data="data"
        highlight-current
        :show-checkbox="multiple"
        check-strictly
        :default-expanded-keys="defaultExpandedKeys"
        :filter-node-method="filterNodeMethod"
        style="grid-area: tree;"
        @check-change="onCheckChange"
        @current-change="onCurrentChange"
        @node-contextmenu="onNodeContextmenu" />
    </ElScrollbar>
  </div>
</template>
<script setup lang="ts">
  import { ElTree, ElInput, ElScrollbar, ElButton } from 'element-plus';
  import { nextTick, onMounted, ref, watch } from 'vue';
  import request from "@/utils/request"
  import { Column } from '@/seed-application/types';
  import { getUrl } from '@/seed-application/utils/ActionUtil';
  import { getRelAction } from '@/seed-application/utils/RelUtil';

  const props = defineProps<{column: Column, value?: string}>()
  
  const column = props.column
  const action = getRelAction(column)
  const elementProps = action.elements?.[column.name]?.elementProps
  const multiple = elementProps?.multiple
  const emits = defineEmits(['choose'])

  const treeRef = ref()
  const keyword = ref('')
  watch(() => keyword.value, (val) => treeRef.value!.filter(val))

  function filterNodeMethod(value: string, data) {
    if (!value) return true
    return data.name?.includes(value)
  }

  const defaultExpandedKeys = ref<string[]>(props.value ? props.value.split(',').map(e => e.trim()) : [])
  const data = ref()

  function onCurrentChange() {
    if(multiple) return

    const currentNode = treeRef.value.getCurrentNode()
    const value = currentNode?.value
    const label = currentNode?.label
    emits('choose', value, label)
  }

  function onCheckChange() {
    if(!multiple) return

    const checkedNodes = treeRef.value.getCheckedNodes()
    const value = checkedNodes.map(e => e.id).join(',')
    const label = checkedNodes.map(e => e[treeProps?.label || 'label']).join(',')
    emits('choose', value, label)
  }

  function onNodeContextmenu() {
    treeRef.value.setCurrentKey(void 0)
  }

  const url = getUrl(action)
  onMounted(async () => {
    const res = await request.get(url)
    console.log('res=====', res)
    data.value = res.data
    if(!props.value) return

    nextTick(() => {
      if(multiple) {
        treeRef.value.setCheckedKeys(props.value.split(',').map(e => e.trim()))
      } else {
        treeRef.value.setCurrentKey(props.value)
      }
    })
  })
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35px minmax(0, 1fr);
    grid-template-areas: 'searches' 'tree';
    row-gap: 10px
  }
  // :deep(.el-tree-node .is-current .el-tree-node__content) {
  //   background: #09e0f0 !important;
  //   color: #FFF;
  // }
</style>